import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

import Home from "@/pages/Home.vue";
import Banner from "@/pages/Banner.vue";
import BannerList from "@/pages/banner/BannerList.vue";
import BannerAdd from "@/pages/banner/BannerAdd.vue";
import Project from "@/pages/Project.vue";
import Detail from "@/pages/Detail.vue";
import Cart from "@/pages/Cart.vue";
import Cart2 from "@/pages/Cart2.vue";

import NotFound from "@/pages/NotFound.vue";

const routes = [
  // 路由重定向
  // 当路由匹配到"/"，自动跳转到"/home""
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: Home,
  },
  {
    path: "/banner",
    component: Banner,
    // children属性用来做嵌套路由
    children: [
      {
        path: "/banner",
        redirect: "/banner/list",
      },
      {
        path: "/banner/list",
        component: BannerList,
      },
      {
        // path: "/banner/add",
        path: "add",
        component: BannerAdd,
      },
    ],
  },
  {
    path: "/project",
    component: Project,
    // 别名, 可以给其中的一个路由添加两个路径
    alias: "/chanpin",
  },
  {
    // 动态路由(路由传参)
    path: "/detail/:id",
    // 命名路由：可以添加name属性，用于路由跳转
    name: "detail",
    component: Detail,
    props: true,
  },
  {
    // 命名视图：一个url，对应多个组件进行显示
    path: "/cart",
    // component: Cart,
    components: {
      a: Cart,
      b: Cart2,
    },
  },
  {
    // 匹配404页面
    // vue默认是排他性路由
    // 要写在整个路由表的最下面
    path: "/:pathMatch(.*)*",
    component: NotFound,
  },
];

// 用router下面的createRouter方法去生成路由实例
const router = createRouter({
  // router的两种模式
  // hash和history
  // hash是带#号的，丑陋
  // history不带#号，如果打包完放到服务器上之后，会出现刷新以后404的问题，需要后端解决
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;
